<template>
	<div style="height: 100%;">
		<div>
			<el-button size="small" @click="$refs.addOtherFileType.open()" icon="el-icon-plus" type="primary">其他档案</el-button>
		</div>

		<el-row :gutter="20" style="margin-top: 10px" v-loading="loading1">
			<el-col v-for="(item,index) in infoList" style="margin-bottom: 30px" :span="index < 3?8:12">
				<div class="contentBorder">
					<div class="mb10 subTitle">{{item.title}}</div>
					<div :style="{'height':index<3?'150px':'300px'}" style="overflow-y: auto;">
						<div v-for="(item1,index1) in item.list" @click="chooseThis(item1)">
							<div class="mb10 point" style="display: flex;justify-content: space-between"
								v-if="item1.status == 'EFFECTIVE'">
								<div style="color: #777;font-weight: normal">
									<span>{{item1.title}}</span>
									<span v-if="item1.remark">（{{item1.remark}}）</span>
								</div>
								<img src="@/assets/fileCommon.png" alt="Image" style="width: 15px;height: 15px">
							</div>
							<div class="mb10 point" style="display: flex;justify-content: space-between"
								v-else-if="item1.status == 'NOT_SUBMIT' || item1.status == 'INEFFECTIVE'">
								<div style="color: #FC2D51;font-weight: normal">
									<span>{{item1.title}}</span>
									<span v-if="item1.remark">（{{item1.remark}}）</span>
								</div>
								<img src="@/assets/fileEmpty.png" alt="Image" style="width: 15px;height: 15px">
							</div>
							<div class="mb10 point" style="display: flex;justify-content: space-between"
								v-else-if="item1.status == 'NOT_INVOLVE'">
								<div style="color: #999;font-weight: normal">
									<span>{{item1.title}}</span>
									<span v-if="item1.remark">（{{item1.remark}}）</span>
								</div>
								<img src="@/assets/sIcon42.png" alt="Image" style="width: 15px;height: 15px">
							</div>
							<div class="mb10 point" style="display: flex;justify-content: space-between"
								v-else-if="item1.status == 'UNQUALIFIED'">
								<div style="color: #EB6F00;font-weight: normal">
									<span>{{item1.title}}</span>
									<span v-if="item1.remark">（{{item1.remark}}）</span>
								</div>
								<img src="@/assets/fileWarning.png" alt="Image" style="width: 15px;height: 15px">
							</div>
							<div class="mb10 point" style="display: flex;justify-content: space-between" v-else>
								<div style="color: #EB6F00;font-weight: normal">
									<span>{{item1.title}}</span>
									<span v-if="item1.remark">（{{item1.remark}}）</span>
								</div>
								<img src="@/assets/fileWarning.png" alt="Image" style="width: 15px;height: 15px">
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<addOtherFileType ref="addOtherFileType" @close="getDocumentCategoryMainModelListByEntId"></addOtherFileType>
	</div>
</template>

<script>
	import addOtherFileType from '@/components/upload/addOtherFileType'
	let that

	export default {
		components: {
			addOtherFileType
		},
		data() {
			return {
				entInfo: {
					tagList: [],
					entTypeList: [],
					entInfo: {},
				},
				params: {},
				things: [],
				infoList: [],
				selelctThing: "", //选择的项目
				receiveTime: '',
				tableData: {
					visible: false,
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				upload: {
					file: '',
					fileList: [],
					visible: false,
					params: {
						id: '', // 档案id
						facilitatorId: '', // 客户id
						categoryItemId: '', // 子类id
						title: '', // 标题
						fileId: '', // 文件id
						remark: '', // 注释
						endTime: '', // 到期时间
						isLong: false,
						receiveTime: '',
					}
				},
				imgParam: {
					'appKey': '222',
					'prodID': '444',
					businessCode: 'sss'
				},
				pdfView: {
					visible: false,
					fileUrl: '',
				},
				isLoading: false,
				loading1:false,
			}
		},
		created: function() {
			that = this

			that.params.categoryMainId = that.getQueryString("categoryMainId")
			that.params.ticketId = that.$store.state.token
			that.params.itemId = that.getQueryString("itemId")
			that.params.subjectId = that.getQueryString("subjectId")

			that.getDocumentEntBaseInfo()
			that.getNeedDealWithDocumentCategoryItemList()
			that.getDocumentCategoryMainModelListByEntId()


		},
		mounted: function() {

		},
		methods: {
			uploadFileOver(files, fileList) {
				return $.notify('文件数量已超出，点击删除后重新上传', {
					status: 'warning'
				}, 1000);
			},

			downloadFile(item) {
				window.open(IMG_VIEW_URL + '&fileID=' + item.fileId)
			},

			previewFile(item) {
				var _this = this;
				let src = IMG_VIEW_URL + '&fileID=' + item.fileId
				_this.getBlob(src, (blob) => {
					_this.previewAS(blob);
				});
			},
			previewAS(blob) {
				blob = new Blob([blob], {
					type: 'application/pdf;chartset=UTF-8'
				})
				let fileURL = URL.createObjectURL(blob)
				window.open(fileURL)
			},
			getBlob(url, cb) {
				let loading = this.$loading({
					lock: true,
					text: '正在下载打开中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let xhr = new XMLHttpRequest();
				xhr.open('GET', url, true);
				xhr.responseType = 'blob';
				xhr.onload = function() {
					if (xhr.status === 200) {
						loading.close();
						cb(xhr.response);
					}
				};
				xhr.send();
			},

			save() {
				let that = this
				if (that.upload.file == '') {
					return $.notify('请上传文件', {
						status: 'info'
					}, 1000);
				} else if (that.upload.title == '') {
					return $.notify('请填写标题', {
						status: 'info'
					}, 1000);
				}
				that.isLoading = true
				that.uploadFile(function(fileId) {
					that.ajax({
						url: '/document/saveOrUpdateDocumentEntCategoryRecord?ticketId=' + that.params
							.ticketId,
						dataType: 'json',
						contentType: 'application/json',
						data: JSON.stringify({
							facilitatorId: that.params.facilitatorId,
							categoryItemId: that.selelctThing.id,
							title: that.upload.params.title,
							remark: that.upload.params.remark,
							fileId: fileId,
							receiveTime: that.upload.params.receiveTime,
							endTime: that.upload.params.endTime,
						}),
						success: function(result) {
							that.upload = {
								file: '',
								visible: false,
								params: {
									id: '', // 档案id
									facilitatorId: '', // 客户id
									categoryItemId: '', // 子类id
									title: '', // 标题
									fileId: '', // 文件id
									remark: '', // 注释
									endTime: '' // 到期时间
								}
							}
							that.tableData.pageIndex = 1
							that.pageDocumentEntCategoryRecord();
							that.getNeedDealWithDocumentCategoryItemList()
							that.getDocumentCategoryMainModelListByEntId()
							that.isLoading = false
							return $.notify('保存成功', {
								status: 'success'
							}, 1000);
						}
					})
				})
			},

			chooseThis(item) {
				console.log(item)
				if (item.categoryType == "PRODUCE_STANDING_BOOK") {
					return that.$router.push("/produceManage/order?ticketId=" + that.params.ticketId)
				} else {
					let thisRouter = "/filesManage/pdfDet?ticketId=" + that.params.ticketId

					thisRouter += "&categoryMainId=" + item.mainId + "&itemId=" + item.id
					that.$router.push(thisRouter)
				}
			},

			changeFile: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);
				if (file.raw.type.indexOf("pdf") == -1) {
					return $.notify('请上传文件', {
						status: 'info'
					}, 1000);
				}
				_this.upload.fileList = fileList
				_this.upload.file = file;
				console.log(fileList)
			},

			removeFile() {
				console.log("remove")
				this.upload.fileList = []
				this.upload.file = ''
			},

			uploadFile: function(callback) {
				var _this = this;
				var formdata = new FormData()
				formdata.append("file", _this.upload.file.raw);
				formdata.append("appKey", _this.imgParam.appKey);
				formdata.append("businessCode", _this.imgParam.businessCode);
				formdata.append("prodID", _this.imgParam.prodID);
				that.ajax({
					url: upload.IMG_URL + '/upload',
					data: formdata,
					type: 'POST',
					dataType: 'json',
					contentType: false,
					processData: false,
					success: function(result) {
						var fileId = result.message.fileID;
						callback(fileId);
					},
					error: function() {}
				})
			},

			handleSizeChange: function(val) {
				this.tableData.pageIndex = 1;
				this.tableData.pageSize = val;
				this.pageDocumentEntCategoryRecord();
			},
			handleCurrentChange: function(val) {
				this.tableData.pageIndex = val;
				this.pageDocumentEntCategoryRecord();
			},
			pageDocumentEntCategoryRecord() {
				const _this = this;
				that.ajax({
					url: '/document/pageDocumentEntCategoryRecord?ticketId=' + that.params
						.ticketId + '&pageIndex=' + _this
						.tableData.pageIndex + '&pageSize=' + _this.tableData.pageSize,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						categoryItemId: _this.selelctThing.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						if (result.status == 1) {
							_this.tableData.list = result.data.records;
							_this.tableData.total = result.data.total;
						} else {
							$.notify(result.infoList[0], {
								status: 'info',
								timeout: 2500
							});
						}
					}
				});
			},


			getDocumentCategoryMainModelListByEntId() {
				let that = this
				that.loading1 = true
				that.ajax({
					url: '/document/getDocumentCategoryMainModelListByEntId?ticketId=' + that.params
						.ticketId,
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
					}),
					success: function(result) {
						that.infoList = result.data
						that.loading1 = false
					}
				})
			},

			getNeedDealWithDocumentCategoryItemList() {
				let that = this
				that.ajax({
					url: '/document/getNeedDealWithDocumentCategoryItemList?ticketId=' + that.params
						.ticketId,
					dataType: 'json',
					data: {
						facilitatorId: that.params.facilitatorId,
					},
					success: function(result) {
						that.things = result.data
						//console.log(that.things)
					}
				})
			},

			getDocumentEntBaseInfo() {
				let that = this
				that.ajax({
					url: '/document/getDocumentEntBaseInfo?ticketId=' + that.params
						.ticketId,
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						subjectId: that.params.subjectId,
					}),
					success: function(result) {
						that.entInfo = result.data
						if (that.entInfo.entTypeList.length < 5) {
							for (let key = 0; key < (5 - that.entInfo.entTypeList.length); key++) {
								that.entInfo.entTypeList.push({
									"settingCode": "", // 类型代码
									"settingName": "", // 类型名称
									"isSelected": true // 是否具备该类型
								})
							}
						}

						console.log(that.entInfo)
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	<style lang="scss"> ::-webkit-scrollbar {
		width: 12px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
	}

	.contentBorder {
		border: 1px solid #ddd;
		background: #fff;
		padding: 20px;
		border-radius: 4px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.mr15 {
		margin-right: 15px;
	}

	.listItem {
		text-align: center;
		color: #262A41;
		border-radius: 12px;
		position: relative;
	}

	.listItemBorder {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.titleItem {
		background: #F9F3E0;
		color: #F16600;
		font-size: 12px;
		padding: 2px 10px;
		border-radius: 3px;
		margin-left: 20px;
	}

	.subTitle {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #262A41;
		border-bottom: 1px solid #EBEEF5;
		padding-bottom: 20px;
	}

	.element-width {
		width: 250px !important;
	}

	.point {
		cursor: pointer
	}
</style>
</style>